<template>
  <div :class="Bem()">
    <span v-if="price !== placeholder" :class="Bem('prefix')">￥</span>
    <span :class="Bem('money')">{{ price }}</span>
  </div>
</template>

<script>
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../config'
import isNil from 'lodash/isNil'

export default {
  props: {
    value: [Number, String]
  },
  data() {
    return {
      placeholder: '--'
    }
  },
  computed: {
    price() {
      if (isNil(this.value)) return this.placeholder
      const value = Number(this.value)
      return !isNaN(value) ? value.toFixed(2) : this.placeholder
    }
  },
  methods: {
    Bem: createBem(`${tableNamespace}__price`)
  }
}
</script>

<style scoped lang="scss">
@import '../variables.scss';
.#{$TableNameSpace} {
  &__price {
    &__prefix {
      color: #8e8f91;
    }
    &__money {
      font-size: 14px;
    }
  }
}
</style>
